<template>
  <div class="containter">
    <div class="step">
      <ol class="titt">
        <el-badge
          :value="item.num"
          :max="99"
          :hidden="item.num == 0"
          class="item"
          v-for="(item, index) in list"
          :key="index"
        >
          <el-button
            class="button"
            size="mini"
            :class="activeIndex == index ? 'cur' : ''"
            :disabled="item.num == 0"
            @click="goAssignBlock('panelRef' + index, 100, index)"
          >{{ item.text }}</el-button>
        </el-badge>
      </ol>
    </div>
    <div
      ref="panelRef0"
      class="basicInfo basicInfo1"
    >
      <div class="titles">
        <span>公积金概况</span>
        <div>
          年份:
          <el-select
            disabled
            v-model="yfData"
            :placeholder="yfDataList.length > 0 ? '请选择' : '暂无数据'"
          >
            <el-option
              v-for="item in yfDataList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <table
        class="table"
        style="table-layout: fixed"
      >
        <tr>
          <th>企业名称</th>
          <td>{{gjjInfo && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
          <th>统一社会信用代码</th>
          <td>{{gjjInfo && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
        </tr>
        <tr>
          <th>最多缴存人数（人）</th>
          <td>{{gjjInfo && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
          <th>最少缴存人数（人）</th>
          <td>{{gjjInfo && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
        </tr>
        <tr>
          <th>最大缴费金额（元）</th>
          <td>{{gjjInfo && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
          <th>最少缴费金额（元）</th>
          <td>{{gjjInfo && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
        </tr>
        <tr>
          <th>月均缴存金额（元）</th>
          <td>{{gjjInfo && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
          <th>月均缴存人数（人）</th>
          <td>{{gjjInfo && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'}}</td>
        </tr>
      </table>
    </div>
    <div
      ref="panelRef1"
      class="basicInfo basicInfo0"
    >
      <div class="titles">
        <div>公积金分析</div>
        <div>
          时间:
          <el-select
            v-model="sjData"
            disabled
          >
          </el-select>
        </div>
      </div>
      <div id="trend"></div>
    </div>

    <div
      ref="panelRef2"
      class="basicInfo basicInfo7"
    >
      <p class="title">
        <span>公积金缴存信息</span><span class="glqyTwo">查看更多信息>></span>
      </p>
      <el-table
        :data="gjjjcData"
        style="width: 100%"
        v-loading="loading3"
        :header-cell-style="{ background: '#f2f9fe' }"
        :empty-text="gjjInfo && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        />
        <el-table-column
          prop="JCNYQ"
          label="缴存年月起"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ forter(scope.row.JCNYQ) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="JCNYZ"
          label="缴存年月止"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ forter(scope.row.JCNYZ) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="GJJJCZE"
          label="公积金缴存金额"
          align="center"
        />
        <el-table-column
          prop="ZJRQ"
          label="征缴日期"
          align="center"
        />
        <el-table-column
          prop="JCRS"
          label="缴存人数"
          align="center"
        />
        <el-table-column
          prop="JCBL"
          label="缴存比例"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.JCBL + "%" }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  gjjjcPage,
  getGjjgk,
  getGjjgkNf,
  getAjqsInfo,
  getGjjfx,
} from '@/api/portay'
import loginVue from '../../login/login.vue'
export default {
  props: ['comInfo','gjjInfo','sqStatu'],
  data() {
    return {
      activeIndex: 'a',
      list: [
        { text: '公积金概况', disabled: true },
        { text: '公积金分析', disabled: true },
        { text: '公积金缴存信息', disabled: false },
      ],
      loading3: false,
      gjjjcData: [],
      dialogVisible3: false,
      pagination3: { page: 1, total: 0 },
      gjjjcMoreData: [],
      loadingSbgk: false,
      gjjObj: {},
      yfData: '',
      sjData: '暂无数据',
      yfDataList: [],
    }
  },
  created() {
    this.getDict()
    this.$nextTick(() => {
      this.getAjqsInfo()
    })
  },
  /* watch: {
    comInfo: {
      handler(newVal, oldVal) {
        if (newVal.shtyxydm) {
          this.getAjqsInfo()
        }
      },
      deep: true,
      immediate: true,
    },
  }, */
  methods: {
    async getDict() {
      const dataSQQD = await this.$store.dispatch('asyncApi/getDict', {
        code: 'zxgslxr',
      })
      this.open(dataSQQD[0].value)
    },
    open(e) {
      let str = (this.gjjInfo && (this.sqStatu == '未授权')) ? '您查询的企业暂未授权，无法查看当前信息!' : `您当前暂无相关内容查看权限，\n如需开通权限请及时联系淄博征信有限公司:${e}`
      this.$alert(str,'提示',
        {
          confirmButtonText: '关闭',
          center: true,
          dangerouslyUseHTMLString: true,
          callback: (action) => {},
        }
      )
    },
    //获取公积金分析数据
    getAjqsInfo() {
      let str = (this.gjjInfo && (this.sqStatu == '未授权')) ? '企业暂未授权' : '暂无查看权限'
      var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;"></sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">${str}</span></div>`
      document.getElementById('trend').innerHTML = html
      document.getElementById('trend').removeAttribute('_echarts_instance_')
      /* getGjjfx().then((res) => {
        if (res.status) {
          let xData = []
          let jeData = []
          let jehbData = []
          let rsData = []
          let rshbData = []
          let jepjz = []
          let rspjz = []
          let rstbData = []
          let jetbData = []
          res.data.zxt.forEach((item) => {
            xData.push(item.lastDays)
            jeData.push(item.GJJJCZE)
            jehbData.push(item.GJJJCZEHB)
            jetbData.push(item.GJJJCZETB)
            rsData.push(item.JCRS)
            rshbData.push(item.JCRSHB)
            rstbData.push(item.JCRSTB)
            res.data.avg.GJJJCZEAVG
              ? jepjz.push(res.data.avg.GJJJCZEAVG)
              : jepjz.push(0)
            res.data.avg.JCRSAVG
              ? rspjz.push(res.data.avg.JCRSAVG)
              : rspjz.push(0)
          })
          this.$nextTick(() => {
            this.getCaseTrend(
              xData,
              jeData,
              rsData,
              jehbData,
              rshbData,
              jepjz,
              rspjz,
              rstbData,
              jetbData
            )
          })
        } else {
          var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;"></sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无查看权限</span></div>`
          document.getElementById('trend').innerHTML = html
          document.getElementById('trend').removeAttribute('_echarts_instance_')
        }
      }) */
    },
    //公积金分析
    getCaseTrend(
      xData,
      jeData,
      rsData,
      jehbData,
      rshbData,
      jepjz,
      rspjz,
      rstbData,
      jetbData
    ) {
      if (false) {
        let chartDom = document.getElementById('trend')
        let myChart1 = echarts.init(chartDom)
        let option

        option = {
          title: {
            text: '',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
            },
            formatter: function (params) {
              var str = '' //声明一个变量用来存储数据
              str += '<div>' + params[0].name + '</div>' //显示日期的函数
              for (var i = 0; i < params.length; i++) {
                str +=
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                  params[i].color +
                  ';"></span>' +
                  params[i].seriesName +
                  '</span> : <span>' +
                  (params[i].seriesName == '缴存金额' ||
                  params[i].seriesName == '月均缴存金额'
                    ? params[i].data + '元'
                    : params[i].seriesName == '缴存人数' ||
                      params[i].seriesName == '月均缴存人数'
                    ? params[i].data + '人'
                    : params[i].data) +
                  '</br>'
              }
              return str
            },
          },
          //color: ['#73a0fa', '#93a0fa', '#23a0fa'],
          color: [
            '#8080ff',
            '#8080ff',
            '#8080ff',
            '#ec808d',
            '#ec808d',
            '#ec808d',
            '#02a7f0',
            '#f59a23',
          ],
          legend: {
            data: ['缴存金额', '缴存人数', '月均缴存金额', '月均缴存人数'],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: xData,
            axisLabel: {
              interval: 0, //X轴信息全副展现
              rotate: xData.length > 13 ? -20 : 0,
            },
          },
          yAxis: [
            {
              type: 'value',
              name: '缴存金额\n单位:元',
              axisLabel: {
                //y轴上带的单位
                formatter: '{value}',
              },
              //标题样式
              nameTextStyle: {
                fontSize: '15px',
                color: '#000',
                fontWeight: 900,
              },
              //轴线
              axisLine: {
                show: true,
              },
              //分割线
              splitLine: {
                show: false,
              },
            },
            {
              type: 'value',
              name: '缴存人数\n单位:人',
              axisLabel: {
                //y轴上带的单位
                formatter: '{value}',
              },
              nameTextStyle: {
                fontSize: '15px',
                color: '#000',
                fontWeight: 900,
              },
              //轴线
              axisLine: {
                show: true,
              },
              //分割线
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: '缴存金额',
              data: jeData,
              type: 'line',
              symbolSize: 8, // 设置折线上圆点大小
              symbol: 'circle', // 设置拐点为实心圆
              yAxisIndex: 0,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#8080ff',
                  },
                },
              },
            },
            {
              name: '缴存金额环比增长',
              data: jehbData,
              type: 'line',
            },
            {
              name: '缴存金额同比增长',
              data: jetbData,
              type: 'line',
            },
            {
              name: '缴存人数',
              data: rsData,
              type: 'line',
              symbolSize: 8, // 设置折线上圆点大小
              symbol: 'circle', // 设置拐点为实心圆
              yAxisIndex: 1,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#FFCC99',
                  },
                },
              },
            },
            {
              name: '缴存人数环比增长',
              data: rshbData,
              type: 'line',
            },
            {
              name: '缴存人数同比增长',
              data: rstbData,
              type: 'line',
            },
            {
              name: '月均缴存金额',
              data: jepjz,
              type: 'line',
              yAxisIndex: 0,
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: 'dotted', //'dotted'虚线 'solid'实线
                  },
                },
              },
            },
            {
              name: '月均缴存人数',
              data: rspjz,
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: 'dotted', //'dotted'虚线 'solid'实线
                  },
                },
              },
            },
          ],
        }
        option && myChart1.setOption(option)
        window.addEventListener('resize', () => {
          myChart1.resize()
        })
      } else {
        var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;"></sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无查看权限</span></div>`
        document.getElementById('trend').innerHTML = html
        document.getElementById('trend').removeAttribute('_echarts_instance_')
      }
    },
    forter(str) {
      return str.length > 0 ? str.slice(0, 4) + '-' + str.slice(4) : str
    },
    // 点击导航栏，滚动条移动到内容所对应的位置
    goAssignBlock(el, speed, index) {
      this.activeIndex = index
      let windowH = window.innerHeight //浏览器窗口高度
      let h = this.$refs[el].offsetHeight //模块内容高度

      let t = this.$refs[el].offsetTop //模块相对于内容顶部的距离
      let top = t - (windowH - h) / 2 //需要滚动到的位置，若改为 t 则滚动到模块顶部位置，此处是滚动到模块相对于窗口垂直居中的位置
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop //滚动条距离顶部高度
      let currentTop = scrollTop //默认滚动位置为当前滚动条位置，若改为0，则每次都会从顶部滚动到指定位置
      let requestId
      //采用requestAnimationFrame，平滑动画
      function step() {
        //判断让滚动条向上滚还是向下滚
        if (scrollTop < top) {
          if (currentTop <= top) {
            //   window.scrollTo(x,y) y为上下滚动位置
            window.scrollTo(0, currentTop)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          //向下滚动
          currentTop += speed
        } else {
          if (top <= currentTop) {
            //注：此处 - speed 是解决居中时存在的问题，可自行设置或去掉
            window.scrollTo(0, currentTop - speed)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          //向上滚动
          currentTop -= speed
        }
      }
      window.requestAnimationFrame(step)
    },
  },
}
</script>

<style scoped lang="scss">
.containter {
  width: 100%;
  .step {
    ol.titt {
      //height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin: 0;
      padding: 0;
      font-size: 14px;
      position: fixed;
      top: 350px;
      right: 24px;
      z-index: 999;
    }
    ol.titt .button {
      width: 150px;
      margin-top: 10px;
    }
    ol.titt .button.cur {
      background-color: #5591f5;
      color: #fff;
    }
  }
  .basicInfo {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    padding: 12px 174px 12px 24px;
    margin-top: 20px;
    #trend {
      width: 1400px;
      height: 400px;
      border-radius: 4px;
      padding: 12px;
      box-shadow: 0 0 10px #e8eaef;
    }
    .titles {
      display: flex;
      margin: 10px 0;
      justify-content: space-between;
      font-size: 18px;
      font-weight: 900;
    }
  }
  .basicInfo1 {
    .title {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
    }
    .table {
      width: 100%;
      height: 100px;
      border-collapse: collapse;
      margin-top: 25px;
      th,
      td {
        width: 238px;
        height: 56px;
        border: #eff1f7 solid 1px;
      }
      th {
        background-color: #f2f9fe;
      }
      td {
        padding-left: 10px;
        text-align: left;
        color: #a6a6a6 !important;
      }
      .jyfw {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .basicInfo7 {
    p {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .echart {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      #social,
      #endowment,
      #gjjjcje,
      #gjjjcrs {
        width: 700px;
        height: 500px;
        border-radius: 4px;
        padding: 12px;
        box-shadow: 0 0 10px #e8eaef;
      }
    }
  }
}
.title {
  font-size: 18px;
  font-weight: 900;
}
.glqy {
  color: #4a8bf6;
  margin-left: 24px;
}
.glqy:hover {
  cursor: pointer;
}
.glqyTwo {
  color: #ccc;
  margin-left: 24px;
}
.glqyTwo:hover {
  cursor: pointer;
}
.block {
  width: 100%;
  display: flex;
  height: 60px;
  align-items: center;
}
.item {
  margin-top: 4px;
  margin-right: 16px;
}
</style>
<style>
.dialog {
  border-radius: 10px;
  padding-bottom: 50px;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*height:600px;*/
  max-height: calc(100% - 200px);
  max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.pagination {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>